<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #contenteditable:checked~[contenteditable]:not(:focus),
  #contenteditable:checked~[contenteditable]:not(:focus) a,
  #contenteditable:not(:checked)~[contenteditable] a {
    cursor: pointer;
  }

  #contenteditable:not(:checked)~[contenteditable] {
    -webkit-user-modify: read-only;
  }
</style>

<body>

  <body class="flex justify-center items-center h-screen bg-blue-100">
    <article class="container box-border max-w-full w-96 mx-auto rounded-md bg-white overflow-hidden shadow-lg">
      <img src="https://picsum.photos/id/4/300/200" class="w-full" alt="" />
      <section class="px-8 pt-8 pb-12">
        <input id="contenteditable" class="absolute top-4 left-4 w-6 h-6" name="contenteditable" type="checkbox"
          checked />
        <label class="absolute top-4 left-10 inline-block ml-2 mb-4">Content editable <span class="text-gray-500">(only
            with -webkit support)</span></label>
        <h1 class="text-2xl mb-4" contenteditable>Edit me !</h1>
        <p class="mb-4" contenteditable>You can edit all the content on this page directly in the render view. Simply
          click on a text element and type your new content.</p>
        <p class="mb-8" contenteditable>If you want to disable the editable feature, uncheck the box at the top of the
          screen.</p>
        <div class="flex justify-between" contenteditable>
          <span>@DeyJordan</span>
          <div class="flex items-center">
            <a class="mr-4" href="https://codepen.io/DeyJordan" target="_top">
              <img class="w-6" src="https://cdn-icons-png.flaticon.com/512/2111/2111501.png" alt="CodePen" />
            </a>
            <a href="https://twitter.com/DeyJordan" target="_top">
              <img class="w-6"
                src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png"
                alt="twitter" />
            </a>
          </div>
        </div>
      </section>
    </article>
  </body>
</body>

</html>